<!--创建送货计划-->
<template>
	<div class="m-selectDialog">
		<!-- 选择采购单订单弹窗 -->
		<el-dialog
			title="选择送货计划单"
			:visible.sync="dialogVisible"
			width="90%"
			:before-close="handleClose"
			v-dialogDrag
			:close-on-click-modal="false"
			:close-on-press-escape="false"
		>
			<el-row :gutter="10" class="m-condition">
				<el-form
					:model="ruleForm"
					ref="ruleForm"
					label-width="70px"
					:inline-message="true"
					label-position="left"
				>
					<el-col :span="6">
						<el-form-item label="客户" class="rightItem">
							<el-select
								value-key="id"
								v-model="ruleForm.selCompanyCode"
								placeholder="请选择客户"
								@change="companyChange"
								ref="company"
								clearable
							>
								<el-option
									v-for="item in comOptions"
									:key="item.id"
									:label="item.companyName"
									:value="item"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="计划单号" class="rightItem">
							<el-input v-model="ruleForm.planNo" placeholder="请输入计划单号" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="需求日期" class="rightItem">
							<el-date-picker
								v-model="ruleForm.requireSd"
								type="date"
								:placeholder="placeholder.start"
								:picker-options="pickerOptions"
								value-format="yyyy-MM-dd"
								:editable="false"
								:clearable="false"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-date-picker
							v-model="ruleForm.requireEd"
							type="date"
							:placeholder="placeholder.end"
							value-format="yyyy-MM-dd"
							:editable="false"
							:clearable="false"
						></el-date-picker>
					</el-col>
					<el-col :span="4">
						<el-form-item label="采购单号" class="rightItem">
							<el-input v-model="ruleForm.purOrdNo" placeholder="请输入订单号" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<el-row :gutter="10" class="m-condition">
				<el-form ref="ruleForm" label-width="70px" :inline-message="true" label-position="left">
					<el-col :span="6" v-if="accountType==4">
						<el-form-item label="供应商" class="rightItem">
							<el-input v-model="ruleForm.supplierName" placeholder="供应商名称" clearable disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="accountType==1">
						<el-form-item label="供应商" class="rightItem">
							<el-select
								filterable
								clearable
								v-model="ruleForm.supplierCode"
								placeholder="请选择供应商"
								@focus="focusMethod"
								@clear="supplierOptions=allSupplier"
								@change="supplierChange"
								:filter-method="filterSupplier"
							>
								<el-option
									v-for="item in supplierOptions"
									:key="item.id"
									:label="item.supplierName"
									:value="item.supplierCode"
								>
									<span style="float: left">{{ item.supplierName }}</span>
									<span style="float: right; color: #8492a6; font-size: 13px">{{ item.supplierCode }}</span>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="物料编码" class="rightItem">
							<el-input v-model="ruleForm.matCode" placeholder="请输入物料编码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="物料描述" class="rightItem">
							<el-input v-model="ruleForm.matName" placeholder="请输入物料描述" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-form>
				<el-col :span="2" :offset="4">
					<el-button type="primary" @click="search(1)" :disabled="btnDis">查询</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="add">确定</el-button>
				</el-col>
			</el-row>
			<div class="dialogBody">
				<agGridComponents
					ref="agGridComponents"
					:getGridOptions="gridOptions"
					:getColumnDefs="columnDefs"
					:getRowSelection="rowSelection"
				></agGridComponents>
			</div>
			<div slot="footer" class="dialog-footer">
				<!-- <el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					@prev-click="handlePrevClick"
					@next-click="handleNextClick"
					:current-page="pageInfo.currentPage"
					:page-sizes="[30,50,100,150,200]"
					:page-size="pageInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageInfo.total"
				></el-pagination>-->
			</div>
		</el-dialog>
	</div>
</template>

<script>
import _Api from "@/api";
import localeText from "@/i18n/agGridText";
import authInfo from "@/public/authInfo.js";
import serviceTime from "@/public/serverTime.js";
import agGridComponents from "@/components/agGridComponents.js";
import addOperation from "@/public/addOperation.js";
import constant from "@/public/constant";


export default {
	data () {
		return {
			btnDis: false,
			detailShow: false,
			ruleForm: {
				requireSd: '', //开始日期
				requireEd: '', //结束日期
				selCompanyCode: '',//公司代码
				supplierCode: '', //供应商代码
				supplierName: '',
				purOrdNo: '',//订单编号
				planNo: '',//计划单号
				matCode: '',//物料编码
				matName: '',//物料描述
			},
			pageLayOut: 'add',
			pickerOptions: {
				disabledDate (time) {
					return time.getTime() > Date.now();
				}
			},
			//分页信息   
			pageInfo: {
				pageSize: 30,//每页显示条数
				total: 0,//总数
				currentPage: 1//当前页
			},
			rowSelection: "multiple",//多选
			// 日期控件默认值   
			placeholder: {
				start: '',
				end: ''
			},
			comOptions: [],
			supplierInfo: [],
			rowData: [],
			columnDefs: "",
			gridOptions: "",
			totalOrderAmount: '',
			totalCanSendAmount: '',
			getClickValue: '',
			btnShow: true,
			companyInfo: {},
			supplier: {},
			// 用户类型
			accountType: this.$global.user.userTypeId,
			//   supplierOptions: [],
			allSupplier: [],
			supplierCode: ''
		};
	},
	props: {
		dialogVisible: {
			type: Boolean
		},
		supplierOptions: {
			type: Array
		}
	},
	beforeMount () {
		this.gridOptions = {
			context: {
				componentParent: this
			},
			enableColResize: true,
			localeText: localeText,
			//   getContextMenuItems: [],
			defaultColDef: {
				menuTabs: []
			},
			pinnedBottomRowData: this.createBottomRow(1, "Bottom"),
			getRowStyle: function (params) {
				if (params.node.rowPinned) {
					return { 'color': 'red', 'font-weight': "bold" }
				}
			},
			onRowSelected: this.rowSelected,
			suppressRowClickSelection: true//单元格选中,false为选中整行
		};
		this.columnDefs = [
			{ headerName: "计划单号", field: "planNo", checkboxSelection: true, width: 150 },
			{ headerName: "需求日期", field: "requireDate", width: 120 },
			{ headerName: "采购单号", field: "purOrdNo", width: 120 },
			{ headerName: "物料编码", field: "matCode", width: 120 },
			{ headerName: "物料描述", field: "matName", width: 160 },
			{ headerName: "区域", field: "area", width: 120, tooltipField: 'area' },
			{ headerName: "计划数量", field: "planAmount", width: 100 },
			{ headerName: "确认数量", field: "confirmAmount", width: 100 },
			{ headerName: "待送货数量", field: "beSentNum", width: 120 },
			{ headerName: "单位", field: "unitCode", width: 70 },
		];
	},
	mounted () {
		let that = this;
		// 获取公司信息
		authInfo.getAuthInfo().then((authCompanyInfo) => {
			that.comOptions = authCompanyInfo;
		});
		// 获取服务器时间
		serviceTime.getServiceTime().then((serviceTime) => {
			that.ruleForm.beginDate = new Date((serviceTime.getTime() - 604800000)).Format("yyyy-MM-dd");
			that.ruleForm.endDate = serviceTime.Format("yyyy-MM-dd");
			that.placeholder.start = "开始日期"
			that.placeholder.end = "结束日期"
		});
		if (this.$global.user.userTypeId == 4) {
			const { supplierCode, supplierName } = this.$global.supplierData
			this.ruleForm.supplierCode = supplierCode
			this.ruleForm.supplierName = supplierName
		}
	},
	components: {
		agGridComponents
	},
	methods: {
		// 选择行回调
		rowSelected (params) {
			if (params.node.selected) {
				this.$refs.agGridComponents.gridOptions.api.forEachNode(function (node) {
					const { purOrdNo, area, requireDate } = node.data
					if (purOrdNo === params.data.purOrdNo && area === params.data.area)
						node.setSelected(true);
					else
						node.setSelected(false);
				})
			} else {
				this.$refs.agGridComponents.gridOptions.api.forEachNode(function (node) {
					const { purOrdNo, area, requireDate } = node.data
					if (purOrdNo === params.data.purOrdNo && area === params.data.area)
						node.setSelected(false);
				})
			}
		},
		// 关闭弹窗回调
		handleClose (done) {
			this.$emit("closePlanDialog")
			// done()
		},
		// 选择公司回调
		companyChange (value) {
			this.companyInfo = value
			this.$emit("companyChange", value)
		},
		// 选择供应商回调
		// supplierChange (value) {
		//   if (!this.companyInfo.companyCode) {
		//     this.$alert("提示：请先选择公司！", {
		//       showClose: false,
		//       confirmButtonText: "确定",
		//       customClass: "alertPrompt"
		//     });
		//     return
		//   }
		//   this.supplier = value
		// },
		// 每页显示条数回调
		handleSizeChange (val) {
			this.pageInfo.pageSize = val
			this.search()
		},
		handleCurrentChange (val) {
			this.pageInfo.currentPage = val
			this.search()
		},
		handlePrevClick (val) {
			this.pageInfo.currentPage = val
		},
		handleNextClick (val) {
			this.pageInfo.currentPage = val
		},
		// 查询采购订单
		search (flag) {
			const { requireSd, requireEd, selCompanyCode, supplierCode, purOrdNo, planNo, matCode, matName } = this.ruleForm
			if (requireSd != "" && requireSd != null && requireEd != "" && requireEd != null) {
				if (requireSd > requireEd) {
					this.$alert("提示：开始日期不能大于结束日期", {
						showClose: false,
						confirmButtonText: "确定",
						customClass: "alertPrompt"
					})
					return
				}
			}
			if (!selCompanyCode) {
				this.$alert("提示：请选择客户", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				})
				return
			}
			let obj = {
				supplierCode,
				requireSd,
				requireEd,
				purOrdNo,
				planNo,
				matCode,
				matName,
				companyCode: selCompanyCode.companyCode,
				type: 0
			}
			if (constant.isTransport) {
				obj.type = 1
				obj.transport = constant.transport.transportName
			} else {
				obj.type = 0
			}
			//   if (flag === 1) this.pageInfo.currentPage = 1
			//   obj.current = this.pageInfo.currentPage
			//   obj.size = this.pageInfo.pageSize
			this.$refs.agGridComponents.loading = true
			this.btnDis = true
			_Api.selectedDeliveryPlan(obj).then((response) => {
				this.$refs.agGridComponents.loading = false
				this.btnDis = false
				let data = response.data;
				if (data.code == "1") {
					if (data.total > 0) {

						this.rowData = data.rows.splice(0);
						this.$refs.agGridComponents.gridOptions.api.setRowData(this.rowData);
						this.totalOrderAmount = 0;
						this.totalCanSendAmount = 0;
						this.$refs.agGridComponents.gridOptions.api.forEachNode((node) => {
							this.totalCanSendAmount = addOperation.accAdd(node.data.planAmount, this.totalCanSendAmount);
							this.$refs.agGridComponents.gridOptions.api.setPinnedBottomRowData(this.createBottomRow(1, "Bottom"));
						})
						this.pageInfo.total = data.total;
						this.$refs.agGridComponents.rowDataChange = true;
					} else {
						this.rowData = [];
						this.$refs.agGridComponents.gridOptions.api.setRowData([]);
						this.pageInfo.total = 0;
						this.totalCanSendAmount = 0;
						this.$refs.agGridComponents.gridOptions.api.setPinnedBottomRowData(this.createBottomRow(1, "Bottom"));
					}
				} else {
					this.$alert(data.info, {
						showClose: false,
						confirmButton: "确定",
						customClass: "alertFailure"
					});
					this.rowData = [];
					this.$refs.agGridComponents.loading = false;
					this.$refs.agGridComponents.gridOptions.api.setRowData([]);
					this.pageInfo.total = 0;
					this.btnDis = false
				}
			}).catch((err) => {
				this.$alert(err.data.message, {
					showClose: false,
					confirmButton: "确定",
					customClass: "alertFailure"
				});
				this.$refs.agGridComponents.loading = false;
				this.$refs.agGridComponents.gridOptions.api.setRowData([]);
				this.pageInfo.total = 0;
				this.current = 0;
				this.btnDis = false
				// that.textChange = 0;
			})
		},
		// 创建底部合计栏
		createBottomRow (count, prefix) {
			let result = [{
				matName: "合计",
				planAmount: this.totalCanSendAmount
			}];
			return result;
		},
		// 确认选择送货计划单
		add () {
			let rows = this.$refs.agGridComponents.gridOptions.api.getSelectedRows();
			if (rows.length <= 0) {
				this.$alert("提示：请选择需要创建的数据", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			}
			this.$emit("addPlan", rows)
		},
		// 筛选供应商
		filterSupplier (value) {
			if (value != '') {
				this.supplierOptions = this.allSupplier.filter(item => item.supplierCode.indexOf(value) > -1 || item.supplierName.indexOf(value) > -1)
			} else {
				this.supplierOptions = this.allSupplier
			}
		},
		// 供应商下拉框获取焦点
		focusMethod () {
			if (!this.ruleForm.selCompanyCode) {
				this.$alert("请先选择公司!", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				this.$refs.company.focus();
			}
		},
		// 供应商选择框下拉
		supplierChange (val) {
			this.$emit('supplierChange', val)
		}
	}
};
</script>

<style lang="less">
.m-selectDialog {
	.el-dialog__body {
		height: 500px;
		position: relative;
	}
	.dialogBody {
		position: absolute;
		top: 80px;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
	.el-dialog__footer {
		padding-top: 0;
		margin-top: 0px;
		text-align: center;
		.dialog-footer {
			button {
				width: 10px;
			}
		}
	}
}
.dropMenu {
	left: 176px;
	width: 150px;
}
</style>